<template>
  <el-date-picker
    v-model="pickerValue"
    v-bind="pickerProps"
    :type="pickerType"
    :value-format="pickerValueFormat"
  />
</template>

<script>
import { timestampToUnix, unixToTimestamp } from '../../utils/datetime'

const PICKER_TYPES = ['datetime', 'date', 'month']

export default {
  name: 'DateTimeRangePicker',

  props: {
    // 起始值
    startValue: {
      type: [String, Number, Date]
    },

    // 结束值
    endValue: {
      type: [String, Number, Date]
    },

    // 类型，可选值：datetime、date、month
    type: {
      type: String,
      default: 'date',
      validator(val) {
        return PICKER_TYPES.indexOf(val) >= 0
      }
    },

    // 绑定值的格式，参考：https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi
    // 新增 unix，秒级时间戳
    valueFormat: {
      type: String,
      default: 'unix'
    },

    // 其他透传属性
    pickerProps: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  computed: {
    // Picker 绑定值
    pickerValue: {
      get() {
        const start = this.valueFormat === 'unix' ? unixToTimestamp(this.startValue) : this.startValue
        const end = this.valueFormat === 'unix' ? unixToTimestamp(this.endValue) : this.endValue
        return start && end ? [start, end] : null
      },
      set(val) {
        if (Array.isArray(val) && val.length === 2) {
          const [start, end] = val
          this.$emit('update:startValue', this.valueFormat === 'unix' ? timestampToUnix(start) : start)
          this.$emit('update:endValue', this.valueFormat === 'unix' ? timestampToUnix(end) : end)
        } else {
          this.$emit('update:startValue', '')
          this.$emit('update:endValue', '')
        }
      }
    },

    // Picker 类型
    pickerType() {
      if (PICKER_TYPES.indexOf(this.type) >= 0) {
        return `${this.type}range`
      } else {
        return 'daterange'
      }
    },

    // Picker 值格式
    pickerValueFormat() {
      return this.valueFormat === 'unix' ? 'timestamp' : this.valueFormat
    }
  }
}
</script>
